function setRem() {
    //ui尺寸
    let uiSize = 750
    //理想视口尺寸
    let winSize = document.documentElement.clientWidth
    //375 iphone6的宽度
    let app = document.getElementById('app')
    let footer = document.querySelectorAll('.page-footer')[0]
    //如果视口尺寸大于设计尺寸750时，就显示750宽度范围
    if (winSize > uiSize) {
        app.style.width = uiSize + 'px'
        app.style.margin = '0 auto'
        app.style.border = '1px solid black'
        return
    }
    //给html元素设置font-size值
    document.documentElement.style.fontSize = winSize / uiSize * 100 + 'px'
    app.style.width = winSize + 'px'
    app.style.border = 'none'
    // footer.style.width = winSize + 'px'
}

function activate() {
    let items = document.querySelectorAll('.item');
    for (let i = 0; i < items.length; i++) {
        let item = items[i];
        let className = item.getAttribute("class");
        if (className.indexOf("activate") === -1) {
            item.children[0].style.display = "block";
            item.children[1].style.display = "none";
        } else {
            item.children[1].style.display = "block";
            item.children[0].style.display = "none";
        }
    }
}

function iconClick() {
    let foot = document.querySelector('.footer')
    let items = document.querySelectorAll('.item');
    for (let i = 0; i < items.length; i++) {
        let item = items[i];
        item.onclick = function () {
            for (let j = 0; j < items.length; j++) {
                if (item[j] === item[i]) {
                    items[j].children[0].style.display = "block";
                    items[j].children[1].style.display = "none";
                    item.children[1].style.display = "block";
                    item.children[0].style.display = "none";
                    items[j].setAttribute('class', 'item');
                    this.setAttribute('class', 'item activate');
                } else {

                }
            }
        }
    }
}

//当页面加载的时候执行的函数
onload = function () {
    setRem()
    activate()
    iconClick()
}
//当页面缩放的时候
onresize = function () {
    setRem()
}